<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<div id="app">
    <table style="font-size: 20px; margin: auto" cellspacing="0" border="1px" bgcolor="lightgray">
        <h3 align="center">京淘电商平台</h3>


        <tr>
            <th style="text-align: center;" width="100px">姓名</th>
            <th style="text-align: center;" width="100px">年龄</th>
            <th style="text-align: center;">性别</th>
            <th style="text-align: center;width:180px">爱好</th>
            <th style="text-align: center;">学历</th>
            <th style="text-align: center;">入学时间</th>
            <th style="text-align: center;">[操作]</th>
        </tr>

        <tr v-for="o in msg" align="center">
            <td>{{o.name}}</td>
            <td>{{o.age}}</td>
            <td>
                <p v-if="o.gender==1">男</p>
                <p v-else>女</p>
            </td>
            <td align="center">
                <span v-for="(value, key, index) in o.hobby">
                <span v-if="value==1">篮球</span>
                <span v-if="value==2">足球</span>
                <span v-if="value==3">排球</span>
                </span>
            </td>
            <td>
                <p>
                <p v-if="o.degree==1">本科</p>
                <p v-else-if="o.degree==2">大专</p>
                <p v-else-if="o.degree==3">研究生</p>
                <p v-else-if="o.degree==4">小学</p>
                <p v-else-if="o.degree==5">胎教</p>
                </p>
            </td>
            <td>{{o.date }}</td>
            <td>
                <button>修改</button>
                <button>删除</button>
            </td>
        </tr>
        <form method="get" action="http://localhost:8080/student/insert" >
            <tr>
                <th style="text-align: center;" width="50px">
                    <input type="text" name="name" placeholder="姓名"/>
                </th>
                <th style="text-align: center;" width="20px">
                    <input type="number" name="age" placeholder="年龄"/>
                </th>
                <th style="text-align: center;">
                    <input type="radio" name="gender" value="1"/>男
                    <input type="radio" name="gender" value="2"/>女
                </th>
                <th style="text-align: center;width:200px">
                    <input type="checkbox" name="hobby" value="1">篮球</input>
                    <input type="checkbox" name="hobby" value="2">足球</input>
                    <input type="checkbox" name="hobby" value="3">排球</input>
                </th>
                <th style="text-align: center;">
                    <select name="degree" style="height: 25px;width: 100px;">
                        <option value="1">本科</option>
                        <option value="2">大专</option>
                        <option value="3">研究生</option>
                        <option value="4">小学</option>
                        <option value="5">胎教</option>
                    </select>
                </th>
                <th style="text-align: center;">
                    <input type="date" name="date" placeholder="入学时间">
                </th>
                <th style="text-align: center;">
                    <input type="submit" value="新增"/>
                </th>

            </tr>
        </form>

    </table>
</div>
</body>
<script>
    new Vue({
        el: "#app",
        data: {
            msg: "暂无数据"
        },
        mounted() {
            axios.get('http://localhost:8080/student/get').then(
                res => (
                    this.msg = res.data
                )
            )
        },
    })
</script>
</html>
